<template>
    <div>
        <el-upload
                class="business-uploader-single"
                accept=".jpeg,.png,.jpg"
                :action="action"
                :headers="headers"
                :show-file-list="false"
                :class="{widthClass313 : edUploadForm.widthClass313,widthClass365:edUploadForm.widthClass365}"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <el-image v-if="pic" :src="pic" fit="contain"></el-image>
            <div v-else>
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65); margin: 0 0 8px 0;line-height: 1">上传图片</div>
                <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65);line-height: 1" v-if="edUploadForm.size">大小不超过2M</div>
            </div>
        </el-upload>
    </div>
</template>

<script>
    import {getToken} from 'src/utils/auth'
    export default {
        name: "EdUploadSingle",
        props:{
            edUploadForm:{
                type:Object,
                required: false,
                default: function () {
                    return {};
                }
            }
        },
        data(){
            return{
                action:"",
                headers:{
                    RdAuthorization: getToken()
                },
                pic:""
            }
        },
        mounted(){
            this.action = this.$baseApi + "/file/upload";
        },
        methods:{
            setPic(url){
                this.pic = url;
            },
            handleAvatarSuccess(file){
                this.pic = file.data;
                this.$emit("pic-url",file.data)
            },
            beforeAvatarUpload(file){
                const fileType = file.name.split('.');
                const fileDate = fileType.slice(-1);
                if (['jpeg', 'jpg', 'png'].indexOf(fileDate[0]) < 0) {
                    this.$message.error('仅支持格式：.jpeg、.jpg、.png!');
                    return false
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 2MB!');
                }
                return isLt2M;
            },
        }
    }
</script>

<style lang="scss">
    .business-uploader-single{
        .el-upload{
            width: 104px;
            height: 104px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
            border-radius: 2px;
            display: flex;
            -webkit-display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            .el-icon-plus{
                font-size: 24px;
                color: rgba(0, 0, 0, 0.45);
            }
        }
    }
    .widthClass313{
        .el-upload{
            width: 313px;height: 164px;
        }
    }
    .widthClass365{
        .el-upload{
            width: 365px;height: 190px;
        }
    }

    .w140{
        width: 104px;
        height: 104px;
    }
</style>